import Vue from 'vue';
/*
 * @description 限制el-swtich等非按钮的重复提交事件 默认1秒 建议使用时候传参安全点
 */
Vue.directive('preventReClick', {
    inserted: function (el, binding) {
        el.addEventListener(
            'click',
            (e) => {
                if (!el.disabled) {
                    el.disabled = true;
                    // el.style.opacity = '0.5';
                    // el.style.cursor = 'not-allowed';
                    setTimeout(() => {
                        el.disabled = false;
                        // el.style.opacity = '1';
                        // el.style.cursor = 'pointer';
                    }, binding.value || 1000);
                } else {
                    // disabled为true时，阻止默认的@click事件
                    e.preventDefault();
                    e.stopPropagation();
                }
            },
            true
        );
    }
});

/*
 * @description 限制el-button按钮的重复提交事件 默认1秒 建议使用时候传参安全点
 */

Vue.directive('debounce', {
    inserted(el, binding) {
        el.addEventListener('click', () => {
            el.classList.add('is-disabled');
            el.disabled = true;
            el.style.opacity = '1';
            el.style.cursor = 'pointer';
            setTimeout(() => {
                el.disabled = false;
                el.classList.remove('is-disabled');
            }, binding.value || 1000); //我这里设置的是1000毫秒也就是1秒
        });
    }
});
Vue.directive('no-enter-submit', {
    bind(el) {
        el.addEventListener('keydown', (event) => {
            if (event.keyCode === 13) {
                event.preventDefault();
            }
        });
    }
});

Vue.directive('integer-only', {
    bind(el, binding, vnode) {
        const input = el.querySelector('input');
        if (input) {
            let isProcessing = false;
            let isComposing = false;

            // 监听 composition 事件
            input.addEventListener('compositionstart', () => {
                isComposing = true;
            });

            input.addEventListener('compositionend', () => {
                isComposing = false;
                handleInput();
            });

            // 监听 input 事件
            input.addEventListener('input', () => {
                if (!isComposing) {
                    handleInput();
                }
            });

            const handleInput = () => {
                if (isProcessing) return;

                isProcessing = true;
                const originalValue = input.value;
                const newValue = originalValue.replace(/\D/g, '');

                if (newValue !== originalValue) {
                    // 更新输入框的值
                    input.value = newValue;

                    // 使用 nextTick 确保 Vue 完成更新 DOM
                    vnode.context.$nextTick(() => {
                        // 手动更新绑定的数据
                        vnode.context[binding.expression] = newValue;

                        // 手动触发输入事件以更新相关联的状态或样式
                        input.dispatchEvent(new Event('input', { bubbles: true }));
                    });
                }

                isProcessing = false;
            };
        }
    }
});
